import React, { useEffect } from 'react'
import { inject, observer} from 'mobx-react'

const App = (props) => {
  console.log('1', props)
  const {  bannerList, proList } = props.store.home
  useEffect(() => {
    fetch('http://121.89.205.189/api/banner/list')
    .then(res => res.json())
    .then(res => {
        props.store.home.changeBannerList(res.data)
      })
    fetch('http://121.89.205.189/api/pro/list')
      .then(res => res.json())
      .then(res => {
          props.store.home.changeProList(res.data)
        })
  }, [])
  return (
    <div>
      {
        bannerList && bannerList.map((item, index) => {
          return <img src={ item.img } key={ index } alt ="" />
        })
      }
      {
        proList && proList.map(item => {
          return <div key = { item.proid }>{ item.proname }</div>
        })
      }
    </div>
  )
}

export default inject('store')(observer(App))
